<template>
  <el-card style="margin: 10px 10px; height: 70px">
    <el-form class="form1">
      <el-form-item label="用户名：">
        <el-input
          width="300px"
          v-model="searchInputVal"
          @input="searchUser"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="searchInputVal.trim().length === 0"
          @click="searchUser"
          >搜索</el-button
        >
        <el-button type="primary" @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 10px; height: 500px">
    <div style="margin: 0 0 10px 0">
      <el-button type="primary" @click="addUser">添加</el-button>
      <el-button type="danger" @click="delBatchUser">批量删除</el-button>
    </div>

    <el-table border :data="userInfoList" style="height: 380px" ref="tableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column label="id" prop="id" width="80"></el-table-column>
      <el-table-column label="用户账号" prop="name"></el-table-column>
      <el-table-column label="用户昵称" prop="username"></el-table-column>
      <el-table-column label="用户角色" prop="roleName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" width="300px">
        <template #="{ row, $index }">
          <el-button
            type="primary"
            icon="User"
            size="small"
            @click="assignRoles(row.id)"
            >分配角色</el-button
          >
          <el-button
            type="primary"
            icon="Edit"
            size="small"
            @click="editUser(row.id)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            icon="Delete"
            size="small"
            @click="delUser(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 7]"
      :background="true"
      layout=" prev, pager, next, jumper,->, sizes,total"
      :total="totalPage"
      @current-change="getUserInfoList"
      @size-change="getUserInfoList"
    />
  </el-card>
  <drawer-info
    @close="drawerCallback"
    :drawerVisible="drawerVisible"
    :drawerType="drawerType"
    :user-id="userId"
  ></drawer-info>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqUserInfo } from "../../../api/user";
import {
  reqDelBatchUser,
  reqDelUser,
  reqGetUserInfo,
} from "../../../api/acl/user";
import drawerInfo from "./drawerInfo.vue";
import { ElMessage } from "element-plus";
import confirm from "../../../utils/confirm";
import { endLoading, startLoading } from "../../../utils/loading";
const totalPage = ref(100);
const currentPage = ref(1);
const pageSize = ref(5);
const userInfoList = ref([]);
const drawerVisible = ref(false);
const drawerType = ref(0);
const userId = ref();
const tableRef = ref();
const searchInputVal = ref("");
let idList = [];
const getUserInfoList = async () => {
  let result = await reqGetUserInfo(currentPage.value, pageSize.value);
  userInfoList.value = result.data.records;
  totalPage.value = result.data.total;
  // console.log(result.data);
};
onMounted(() => {
  getUserInfoList();
});

const addUser = () => {
  drawerVisible.value = true;
  drawerType.value = 0;
};
const editUser = (id: number) => {
  drawerVisible.value = true;
  drawerType.value = 1;
  userId.value = id;
};

const drawerCallback = () => {
  drawerVisible.value = false;
  getUserInfoList();
};

const delUser = async (id: number) => {
  confirm("你确定要删除该用户吗?", async () => {
    let result = await reqDelUser(id);
    if (result.code === 200) {
      ElMessage.success("删除成功");
      getUserInfoList();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

const assignRoles = (id: number) => {
  drawerVisible.value = true;
  drawerType.value = 2;
  userId.value = id;
};

// 批量删除用户
const delBatchUser = () => {
  let data = tableRef.value.getSelectionRows();
  if (data.length === 0) {
    ElMessage.info("您还未选择任何行");
    return;
  }
  idList = [];
  data.forEach((item: any) => {
    idList.push(item.id);
  });
  // console.log(idList);
  confirm("你确定要删除吗？", async () => {
    let result = await reqDelBatchUser({ data: idList });
    if (result.code === 200) {
      ElMessage.success("删除成功");
      getUserInfoList();
      idList = [];
    } else {
      ElMessage.error("删除失败");
    }
  });
};
// 搜索用户
const searchUser = async () => {
  if (searchInputVal.value.trim().length > 0) {
    startLoading();
    let result = await reqGetUserInfo(currentPage.value, pageSize.value, {
      username: searchInputVal.value.trim(),
    });
    endLoading();
    userInfoList.value = result.data.records;
    totalPage.value = result.data.total;
  } else {
    startLoading();
    getUserInfoList();
    endLoading();
  }
};
// 重置搜索
const resetSearch = () => {
  searchInputVal.value = "";
  getUserInfoList();
};
</script>

<style lang="scss" scoped>
.form1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
